<!-- 轨迹 -->

<template>
  <div />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

const { AMap } = window

const getLabelContent = (item, STATUS) => `
<div class="PatrolGaode-MapTrack-label">
  <div class="MajorTitle"><span class="MajorTitle-prop">${item.pointName}</span></div>
  <div class="track-status-${item.pointStatus || 0}">
    <label>状态：</label>
    <span>${CORE.dict(STATUS, item.pointStatus) || '-'}</span>
  </div>
  <div style="display: ${item.arriveTime ? 'block' : 'none'}">
    <label>时间：</label>
    <span>${CORE.timeStr(item.arriveTime)}</span>
  </div>
` + (item.events || []).map((x) => `<div><label>${x.eventName}：</label><span>${x.eventResult}</span></div>`) + `
</div >
`

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MapTrack',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixSelect('track', 'track_'), CORE.mixInfo('point', 'point_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 是否全部就绪
     */
    readyAll() {
      return this.MAP.readyMap && this.param.tab === this.DICT.TAB[1][0] && this.MAP.inTrack && this.track_readySelect
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听全部就绪
     */
    readyAll: {
      immediate: true,
      handler(ready) {
        ready && this.addToMap()
      },
    },
  },

  /**
   * 销毁之前 (先抽取再调用)
   */
  beforeDestroy() {
    this.MAP.inSearch = false
    this.MAP.inTrack = false
    this.track_selectParam.id = ''
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 添加到地图
     */
    addToMap() {
      const { map, LINE } = this.MAP
      const select = this.track_select.filter((item) => item.lon && item.lat)
      const length = select.length

      // 清空
      map.clearMap()

      // 文本标记点
      select.forEach((item, i) => {
        const position = new AMap.LngLat(item.lon, item.lat)

        const num = !i ? '起' : i === length - 1 ? '终' : i + 1
        const color = !item.arriveTime ? '' : !i ? 'green' : i === length - 1 ? 'red' : 'blue'
        const zIndex = !i || i === length - 1 ? length : i

        const marker = new AMap.Text({
          map,
          position,
          text: `<div class="SecurePatrol-PatrolGaode-track-index flexCC track-${color}">${num}</div>`,
          anchor: 'center',
          zIndex,
        })
        const label = new AMap.Text({
          map,
          position,
          text: getLabelContent(item, this.DICT.TRACK_STATUS),
          anchor: 'top-center',
          visible: false,
          zIndex: 1000,
          offset: [0, 18],
        })

        marker.on('mouseover', () => label.show())
        marker.on('mouseout', () => label.hide())
        marker.on('click', () => this.point_startInfo({ id: item.pointId }))
      })

      // 折线轨迹
      const list = select.filter((item) => item.arriveTime)
      if (list.length > 1) {
        const path = list.map(({ lon, lat }) => [lon, lat])
        const polyline = new AMap.Polyline({ ...LINE, path })
        map.add(polyline)
      }

      // 自适应缩放显示
      map.setFitView(null, null, [0, 0, 0, 600], 19)
    },
  },
}
</script>
